<template>
	<!-- 佣金明细 -->
	<view class="commission">
		<view class="commission_top d-flex-justCenter"
			style="position: fixed; width: 100%; left: 0;top: 0; background-color: '#000000';z-index: 99;">
			<!-- 内容 -->
			<view class="color_ff" style="width: 100%;height: 100%;">
				<view class="commission_top_title d-flex-yCenter-ju">
					<view class="" style="margin: 60rpx 0rpx 40rpx;font-size: 16px;">
						可提现金额（元）
					</view>
				</view>
				<view class="commission_top_price d-flex-yCenter-ju  ">
					{{bossmonydetail}}
				</view>
				<view class="commission_button d-flex-yCenter-ju" @click="Withdraw">
					<view class="d-flex-yCenter-ju color_black">提现</view>
				</view>
			</view>
		</view>
		<!-- 总佣金 -->
		<view class="commission_all">
			<view class="commission_all_price d-flex-yCenter-sb">
				<view class="">
					<view class=" " style="margin-bottom: 24rpx;">
						累计总佣金：
					</view>
					<view class="color_yello  " style=" ">
						{{(bossmonydetail*1)+(withdrawtotalPrice*1)}}
					</view>
				</view>
				<view class="" style="width: 2px;height: 20px;background: #000000;">
				</view>
				<view class="">
					<view class="" style="margin-bottom: 24rpx;">
						已提现金额：
					</view>
					<view class="color_yello" style=" ">
						{{withdrawtotalPrice}}
					</view>
				</view>
			</view>
		</view>
		<!-- 佣金记录 -->
		<view class="mony_detail d-flex-yCenter"
			style="position: fixed;top: 275px;z-index: 99;background: #F5F5F5;    width: 100%;">
			<view class="" style="width: 4px;height: 15px;background: #000000;border-radius: 2px;margin-right: 20rpx;">
			</view>
			<view class="" style="font-weight: bold;">
				佣金记录/提现记录
			</view>
		</view>
		<!-- 记录列表 :style="'height:'+scrollH+'px;'"-->
		<view class="" style="position: relative; top: 322px ;">
			<!-- <scroll-view scroll-y="true" @scrolltolower="onreachBottom"> -->
			<view class="d-flex-yCenter-sb" v-for="(item,index) in withdrawList" :key="index"
				style="padding: 32rpx 30rpx 30rpx; background: #FFFFFF;border-bottom: 1px solid #E0E0E0;">
				<view class="">
					<view class="" style="margin-bottom: 20rpx;">
						{{item.remark}}
					</view>
					<view class="">
						{{computetime(item.addtime*1000)}}
					</view>
				</view>
				<view class="color_yello" v-if="item.type==2">
					+{{item.money}}
				</view>
				<view class="" v-if="item.type==3">
					-{{item.money}}
				</view>
			</view>
			<!-- </scroll-view> -->
			<view class="py-30 text-al-center">
				<u-loadmore icon :load-text='loadText' :status="status" @loadmore="addRandomData"></u-loadmore>
			</view>
		</view>



	</view>
</template>
<script>
	//佣金记录/提现记录  已完结
	import {
		rebate_and_withdraw
	} from '@/config/apiRouter.js'
	// 时间戳
	import {
		time
	} from '@/config/tool.js'
	// 提现总金额  已完成
	import {
		withdraw_total
	} from '@/config/apiRouter.js'
	// 获取个人信息
	import {
		userInfo
	} from '@/config/apiRouter.js'
	export default {
		data() {
			return {
				scrollH: 600,
				page: 1, //页数
				limit: 10,
				onreachBottomBoolen: true, //控制上拉
				withdrawtotalPrice: '', //提现总金额
				bossmonydetail: '', //提现余额
				total: '', //总的条数
				loadText: {
					loadmore: '点击获取下一页数据',
					loading: '努力加载中',
					nomore: '哦豁！着 没有更多数据了'
				},
				status: 'loadmore', //status对应的值loadText的key就是显示内容
				list: false,
				// 测试数据
				// withdrawList: [{
				// 	addtime: 1630636166,
				// 	money: "1.00",
				// 	remark: "您直接推广的用户消费10元,获得收益1元",
				// 	type: 2
				// }, {
				// 	addtime: 1630636166,
				// 	money: "1.00",
				// 	remark: "您直接推广的用户消费10元,获得收益1元",
				// 	type: 2
				// }, {
				// 	addtime: 1630636166,
				// 	money: "1.00",
				// 	remark: "您直接推广的用户消费10元,获得收益1元",
				// 	type: 2
				// }, {
				// 	addtime: 1630636166,
				// 	money: "1.00",
				// 	remark: "您直接推广的用户消费10元,获得收益1元",
				// 	type: 2
				// }, {
				// 	addtime: 1630636166,
				// 	money: "1.00",
				// 	remark: "您直接推广的用户消费10元,获得收益1元",
				// 	type: 2
				// }, {
				// 	addtime: 1630636166,
				// 	money: "1.00",
				// 	remark: "您直接推广的用户消费10元,获得收益1元",
				// 	type: 2
				// }, {
				// 	addtime: 1630636166,
				// 	money: "1.00",
				// 	remark: "您直接推广的用户消费10元,获得收益1元",
				// 	type: 2
				// }, {
				// 	addtime: 1630636166,
				// 	money: "1.00",
				// 	remark: "您直接推广的用户消费10元,获得收益1元",
				// 	type: 2
				// }, {
				// 	addtime: 1630636166,
				// 	money: "1.00",
				// 	remark: "您直接推广的用户消费10元,获得收益1元",
				// 	type: 2
				// }, ],
				// 正式数据
				withdrawList: [],
				//佣金记录/提现记录
				// mony_detail: [{
				// 		title: '提现',
				// 		time: '2021-08-12',
				// 		print: '-200.00',
				// 		color: '#FF890B'
				// 	},
				// 	{
				// 		title: '来自一级分销员王小妹的佣金',
				// 		time: '2021-08-12',
				// 		print: '+500.00',
				// 		color: '#000000'
				// 	},
				// 	{
				// 		title: '提现',
				// 		time: '2021-08-12',
				// 		print: '-200.00',
				// 		color: '#000000'
				// 	},
				// 	{
				// 		title: '来自二级分销员王小妹的佣金',
				// 		time: '2021-08-12',
				// 		print: '+600.00',
				// 		color: '#FF890B'
				// 	},
				// ]
			}
		},
		onShow() {
			this.rebate_and_withdraw();
			this.withdrawtotal(); //	// 提现总金额
			this.userInfoview();
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight - uni.upx2px(305);
				}
			});
		},
		methods: {
			userInfoview() {
				userInfo().then(res => {
					this.bossmonydetail = res.data.money; //提现余额 
				})
			},
			// 佣金记录/提现记录  已完结
			rebate_and_withdraw() {
				rebate_and_withdraw({
					page: this.page, //1
					limit: this.limit //10
				}).then(res => {
					// console.log(res, 'diweudiuewfdewgew')
					// if (res.data.data.length == 0) {
					// 	this.list = true;
					// 	this.status = 'nomore';
					// 	return;
					// } else if (res.data.data.length != this.limit) {
					// 	this.withdrawList.push(...res.data.data);
					// 	this.total = res.data.total; //条数
					// 	this.status = 'nomore';
					// }
					this.withdrawList.push(...res.data.data);
					this.total = res.data.total; //条数
					this.status = 'loadmore';
				})
			},
			addRandomData() {
				this.page++;
				// if (this.withdrawList.length >= 28) {
				// 	this.status = 'nomore'
				// 	return;
				// } else {
				// 	this.status='loading'; 18849989911
				// 	console.log('withdrawList')
				// 	// this.rebate_and_withdraw()
				// 	this.withdrawList.push(...this.withdrawList);
				// 	this.status='loadmore';
				// }
				// console.log('当前页:', this.page, '末页:', this.last_page);
				if (this.total != this.limit) {
					this.status = 'nomore'; //，没有更多数据了
					return;
				}
				this.rebate_and_withdraw()

			},
			// 去提现
			Withdraw() {
				console.log('去提现')
				uni.navigateTo({
					url: '../Withdraw/Withdraw'
				})
			},
			withdrawtotal() {
				withdraw_total().then(res => {
					this.withdrawtotalPrice = res.data;
					console.log(res, '提现总金额')
				})
			},
			// 下拉加载addRandomData
			// onreachBottom() {
			// addRandomData() {
			// 	// 测试数据
			// 	if (this.onreachBottomBoolen) {
			// 		this.onreachBottomBoolen = false;
			// 		console.log('底部');
			// 		if (this.withdrawList.length >= 118) {
			// 			return;
			// 		} else {
			// 			// this.rebate_and_withdraw()
			// 			this.withdrawList.push(...this.withdrawList);
			// 			this.onreachBottomBoolen = true;
			// 		}
			// 		// 请求下一页数据  正式数据
			// 		// if (this.onreachBottomBoolen) {
			// 		// 	this.onreachBottomBoolen = false;
			// 		// 	console.log('底部');
			// 		// if (this.withdrawList.length >= this.total) {
			// 		// 	return;
			// 		// } else {
			// 		// 	this.rebate_and_withdraw()
			// 		// 	this.onreachBottomBoolen = true;
			// 		// }

			// 	}
			// },


		},
		computed: {
			computetime() {
				return (value) => {
					return time(value, 'YMD')
				}
			},
		}
	}
</script>

<style lang="scss">
	.commission {
		background-color: #F5F5F5;
		height: 100vh;

		.color_ff {
			color: #FFFFFF;
		}

		.color_yello {
			color: #FF7500;
		}

		.color_black {
			color: #000000;
		}

		.commission_top {
			height: 360rpx;
			border: 1px;
			background: url(../../static/icon/commission_top.png);
			background-size: 100%;

			.commission_top_title {}

			.commission_top_price {
				margin-bottom: 40rpx;
			}

			.commission_button view {
				width: 240rpx;
				height: 60rpx;
				background: #FFFFFF;
				border-radius: 15px;
			}

		}

		.commission_all {
			width: 100%;
			top: 200px;
			height: 145rpx;
			position: fixed;
			z-index: 99;
			background-color: #FFFFFF;

			.commission_all_price {
				width: 690rpx;
				margin: -30rpx 30rpx 20rpx;
				padding: 30rpx 30rpx 16rpx 32rpx;
				background: #FFFFFF;
				border-radius: 6px;
				// box-shadow: #FFE9D1; 
				box-shadow: 0px 2px 9px #FFE9D1;
				// position: absolute;

			}
		}

		// 佣金记录
		.mony_detail {
			padding: 30rpx;
		}

	}
</style>
